<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
	window.onload = function(){
		
		var canvas = document.getElementById('myCanvas');
		var ctx = canvas.getContext('2d');
		var ctx2 = canvas.getContext("2d");
		var i = 0;
		
		canvas.width = 800;
		canvas.height = 600;
		 
		var mySprite = {
		    x: 200,
		    y: 200,
		    width: 50,
		    height: 50,
		    speed: 200,
		    color: '#c00'
		};
		 
		var keysDown = {};
		window.addEventListener('keydown', function(e) {
		    keysDown[e.keyCode] = true;
		});
		window.addEventListener('keyup', function(e) {
		    delete keysDown[e.keyCode];
		});
		 
		function update(mod) {
		    if (37 in keysDown) {
		        mySprite.x -= mySprite.speed * mod;
		    }
		    if (38 in keysDown) {
		        mySprite.y -= mySprite.speed * mod;
		    }
		    if (39 in keysDown) {
		        mySprite.x += mySprite.speed * mod;
		    }
		    if (40 in keysDown) {
		        mySprite.y += mySprite.speed * mod;
		    }
		}
		 
		function render() {
			if(i %2 == 0){
				
			ctx.strokeStyle = "#0000ff";
			ctx.lineWidth = "3";
			ctx.fillStyle = "#aaaaff";
			ctx.fill();
			ctx.beginPath();
			ctx.moveTo(mySprite.x,mySprite.y);
			ctx.arc(mySprite.x,mySprite.y,45,Math.PI*1.8,Math.PI*0.2,true);
			ctx.closePath();
			ctx.fill();
			ctx.stroke();
			}
			else{
				ctx.strokeStyle = "#0000ff";
				ctx.lineWidth = "3";
				ctx.fillStyle = "#aaaaff";
				ctx.fill();
				ctx.beginPath();
				ctx.moveTo(mySprite.x,mySprite.y);
				ctx.arc(mySprite.x,mySprite.y,45,Math.PI*0,Math.PI*2.0,true);
				ctx.closePath();
				ctx.fill();
				ctx.stroke();
			}
			ctx2.strokeStyle = "#ff00ff";
			ctx2.lineWidth = "3";
			ctx2.fillStyle = "#aaffff";
			ctx2.beginPath();
			ctx2.arc(mySprite.x+10,mySprite.y-30,10,0,Math.PI*2.0, true);
			ctx2.fill();
			ctx2.closePath();
			ctx2.stroke();
			i++;
		}
		 
		function run() {
			ctx.clearRect(0,0,600,500);
			ctx2.clearRect(0,0,600,500);
		    update((Date.now()- time) / 1000);
		    render();
		    time = Date.now();
		}
		
		var time = Date.now(); 
		setInterval(run, 100);
		
		
		var canvas = document.getElementById('myCanvas');
		var height = 100;
		ctx = canvas.getContext('2d');
		ctx.fillStyle = "#aaaaff";
		ctx.strokeStyle = "#0000ff";
		ctx.lineWidth = "3";
		
		ctx.strokeRect(200,600, 100,-200);
		ctx.strokeRect(300,600, 100,-height);
		ctx.strokeRect(400,600, 100,-450);
		ctx.strokeRect(500,600, 100,-height);
		ctx.stroke();
		
	}
</script>
</head>
<body>
	<canvas id="myCanvas" width = "800px" height =" 700px">
	</canvas>
</body>
</html>